<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>《系统工程》精品资源共享课——教学课件</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../css/common.css">
	<style type="text/css">
		main{
			
			width:90%;
			margin:0 auto;
			margin-bottom: 130px;
		}
		#catalog{
			margin:10px;
			background-color: white;
			border-radius: 8px;
			min-width:200px;
			max-height: 500px;
			padding:  0;
			overflow-y: scroll;
		}
		#catalog>ul>li{
			padding:25px 0px 20px 0px;
			cursor: pointer;
			font-size:16px;
			border-radius: 4px;
			margin:0;
		}
		#catalog ul li a:hover{
			background-color:#504D4D;
			width: 100%;
			color:white;
		}
		#catalog .dropdown-menu{
			position:relative;
			width:100%;
			top:20px;
			display: none;
		}
		#catalog li{
			width:100%;
			text-align: center;
		}
		#catalog .dropdown-menu li a:nth-child(1){
			width:100%;
			margin-top: -5px;
			padding: 10px;
		}
		.li-click{
			background-color:#2C2B2B;
			color:white;
		}
		#video{
			border-radius: 8px;
			background-color: white;
			padding:40px;
			margin:10px;
			min-width:600px;
			height:500px;
		}
		#video video{
			width:90%;
			margin: 0 auto;
		}
		.noVideo{
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div id="top">
		<img src="../image/huanonglogo.png" class="logo">
		<ul>
			<li class="userInfo hidden"><a href="userInformation.html">个人信息</a></li>
			<li><span id="user"></span></li>
			<li class="logout hidden"><a href="login.html">退出</a></li>
			<li id="login" class="login"><a href="login.html"><img src="../image/user.png"><span>登录</span></a></li>
		</ul>
	</div>
	<nav>
		<ul class="rows">
			<li class="col-md-2 col-lg-2"><a href="../index.html">首页</a></li>
			<li class="dropdown col-md-2 col-lg-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程概要<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="primaryResource.html">教学大纲</a></li>
					<li><a href="primaryResource.html">教学日历</a></li>
					<li><a href="primaryResource.html">教学教材</a></li>
					<li><a href="primaryResource.html">参考资料</a></li>
					<li><a href="primaryResource.html">重点难点</a></li>
				</ul>
			</li>
			<li class="dropdown col-md-2 col-lg-2">
				<a href="#"  data-toggle="dropdown" class="dropdown-toggle">课程资源<span class="glyphicon glyphicon-chevron-down"></span></a>
				<ul class="dropdown-menu">
					<li><a href="video.html">教学视频</a></li>
					<li><a href="ppt.html">教学课件</a></li>
					<li><a href="homework.html">作业</a></li>
				</ul>
			</li>
			<li class="col-md-2 col-lg-2"><a href="courses.html">课程内容</a></li>
			<li class="col-md-2 col-lg-2"><a href="expandingResource.html">拓展资源</a></li>
			<li class="col-md-2 hidden teacher_li"><a href="teacherCourseManagement.html">课程管理</a></li>
		</ul>

	</nav>
	<main class="rows">
		<section id="catalog" class="col-md-3 col-xs-8 col-lg-3">
			<ul class="firstUl">
				<!--<li class="li-click dropdown" >
					第1章 系统工程概述<span class="glyphicon glyphicon-chevron-down"></span>
					<ul class="dropdown-menu">
						 <li class=""><a>视频1</a></li>
						<li class=""><a>视频2</a></li>
					</ul>
				</li>
				<li class="dropdown">
					第2章 系统工程方法论<span class="glyphicon glyphicon-chevron-down"></span>
					<ul class="dropdown-menu">
						<li><a class="">视频1</a></li>
					</ul>
				</li>
				<li class="dropdown">第3章 系统模型与模型化</li>
				<li class="dropdown">第4章 系统仿真及系统动力学方法</li>
				<li class="dropdown">第5章 系统评价方法</li>
				<li class="dropdown">第6章 决策分析方法</li>
				<li class="dropdown">第7章 系统工程应用实例</li> -->
			</ul>
		</section>
		<section id="video" class="col-md-8 col-xs-6 col-lg-7">
			<!-- <video width="650px" height="400px" controls src="../videos/jcfxff1.mp4" type="video/mp4">
				
			</video> -->
		</section>
	</main>
	<footer>
		<p>版权所有：华南农业大学 数学与信息学院 软件学院</p>
	</footer>
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var sectionList;
			getAllSection();
			
		})
		
		$("#catalog>ul").on("click",".dropdown",function(ev){
			var target=$(ev.target);
			if(target.hasClass("dropdown")){
				target.removeClass('li-click').addClass('li-click');
				target.siblings().removeClass('li-click');
				if($(this).find('.dropdown-menu').css("display")=="none"){
					$(this).find('.dropdown-menu').show();
				}else{
					$(this).find('.dropdown-menu').hide();
				}
			}
			var seId=$(this).attr("name");
			for(var i=0;i<sectionList.length;i++){
				if(sectionList[i].seId==seId){
					let videoList=sectionList[i].video;
					
					if(videoList.length==0){
						$("#video").empty();
						$("#video").append('<a class="noVideo" href="">该章节没有视频</a>');
					}
				}
				
			}
		});

		$("#catalog>ul").on('click', '.v', function(ev) {
			ev.stopPropagation();
			$("#video").empty();
			var target=$(ev.target);
			var start=$(this).attr("name").indexOf('-');
			var seId=$(this).attr("name").slice(0,1);
			var vId=$(this).attr("name").slice(start+1);
			for(var i=0;i<sectionList.length;i++){
				if(sectionList[i].seId==seId){
					let videoList=sectionList[i].video;
					if(videoList.length==0){
						$("#video").append('<a class="noVideo" href="">该章节没有视频</a>');
					}else{
						for (var j = 0; j < videoList.length; j++) {
							if(videoList[j].vId==vId){
								$("#video").empty();
								$("#video").append('<div>视频名称：'+videoList[j].vName+'</div>');
								$("#video").append('<video width="650px" height="400px" controls src="../videos/'+videoList[j].vName+'.mp4" type="video/mp4"></video>');
							}
						}
						
					}
				}
				
			}
		});



		
		function getAllSection(){
			var sectionNum;
			$.ajax({
				url: '/sectionController/queryAllSection',
				type: 'POST',
				success: function(data){
					sectionList=data;
					sectionNum=data.length;
					for(var i=0;i<sectionNum;i++){
						let videoList=data[i].video;
						$("#catalog .firstUl").append('<li name="'+data[i].seId+'" class="dropdown">第'+data[i].seSeq+'章 '+data[i].seName+'</li>');
						if(videoList.length!=0){
							$("#catalog .firstUl").find("li[name="+data[i].seId+"]").append('<span class="glyphicon glyphicon-chevron-down"></span>');
							$("#catalog .firstUl").find("li[name="+data[i].seId+"]").append('<ul class="dropdown-menu"></ul');
							for (var j = 0; j < videoList.length; j++) {

								$("#catalog .firstUl").find("li[name="+data[i].seId+"]>ul").append('<li class="v" name="'+data[i].seId+'-'+videoList[j].vId+'"><a>'+videoList[j].vName+'</a><li>');
								
							}
						}
						if(data[i].seSeq==1){
							$("#catalog .firstUl").find("li[name="+data[i].seId+"]").addClass('li-click');
							if(videoList.length!=0){
								$("#video").append('<video width="650px" height="400px" controls src="../videos/'+videoList[0].vName+'.mp4" type="video/mp4"></video>');
							}else{
								$("#video").append('<a class="noVideo" href="">该章节没有视频</a>');
							}

						}
					}
				}
			});
		}
		
	</script>
</body>
</html>